<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
                <el-form-item label="用户ID">
                    <el-input
                            class="w-[150px]"
                            v-model="queryParams.uuid"
                            placeholder="请输入用户ID"
                            clearable
                            @keyup.enter="resetPage"
                    />
                </el-form-item>
                <el-form-item label="用户昵称/姓名/手机号">
                    <el-input
                            class="w-[280px]"
                            v-model="queryParams.user_keys"
                            placeholder="请输入用户昵称/姓名/手机号"
                            clearable
                            @keyup.enter="resetPage"
                    />
                </el-form-item>
                <el-form-item label="日期区间">
                    <daterange-picker
                        v-model:startTime="queryParams.create_at_start_time"
                        v-model:endTime="queryParams.create_at_end_time"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPageNew">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
			<!-- <div class="flex justify-between">
				<div class="text-primary">红包可发放金额：{{redData}} 。</div>
				<div>
					<el-button @click="userDelete" type="primary" class="w-[90px] h-[30px] mb-[9px] text-[12px]">充值积分金额</el-button>
				</div>

			</div> -->
            <el-tabs class="demo-tabs">
                <el-table size="large" v-loading="pager.loading" :data="pager.lists" style="width: 100%">
                    <el-table-column label="用户ID / 手机号 / 昵称" prop="name" min-width="220">
                        <template #default="{ row }">
                            {{ row.uuid }} / {{ row.phone }} / {{ row.nickname }}
                        </template>
                    </el-table-column>
                    <el-table-column label="积分" prop="name" min-width="120">
                        <template #default="{ row }">
                            {{ row.price }}
                        </template>
                    </el-table-column>

                    <el-table-column label="操作前金额" prop="name" min-width="120">
                        <template #default="{ row }">
                            {{ row.before }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作后金额" prop="name" min-width="120">
                        <template #default="{ row }">
                            {{ row.after }}
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" prop="name" min-width="180">
                        <template #default="{ row }">
                            {{ row.created_at }}
                        </template>
                    </el-table-column>
                    <el-table-column label="备注" prop="name" min-width="180">
                        <template #default="{ row }">
                            {{ row.content }}
                        </template>
                    </el-table-column>
                </el-table>
                <div class="flex justify-end mt-4">
                    <pagination v-model="pager" @change="getLists" />
                </div>
            </el-tabs>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
    import { redInfo, getUserBalance4PageList ,sysRecharge} from '@/api/consumer'
    import { usePaging } from '@/hooks/usePaging'
    import feedback from "@/utils/feedback";
    const queryParams = reactive({
        uuid: '',
        user_keys: '',
        create_at: '',
        create_at_start_time: '',
        create_at_end_time: '',
    });
	const coupon_state = [
	    {
	        id: 1,
	        name: '发放中'
	    },
	    {
	        id: 2,
	        name: '已到账'
	    },
	    {
	        id: 3,
	        name: '发放失败'
	    },
	];

    const { pager, getLists, resetPage, resetParams } = usePaging({
        fetchFun: getUserBalance4PageList,
        params: queryParams
    });

    const resetPageNew = () => {
        queryParams.create_at = queryParams.create_at_end_time ? `${queryParams.create_at_start_time} - ${queryParams.create_at_end_time}` : null;
        getLists()
    };

	const redData =ref([]);;

	 redInfo({}).then((res) => {
		redData.value =res.total
	});

    getLists();
	let price:any = []
    // 补发
    const userDelete = async () => {
     price = await feedback.prompt("请输入积分充值金额","积分充值");
	 if(price.action=="confirm"){
		 sysRecharge({price: price.value});
		redInfo({}).then((res) => {
			redData.value =res.total
		});
	 }

    };

</script>
